<template>
  <view class="container">
    <view class="box">获取这个盒子的宽高、位置等信息</view>
  </view>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue'

  onMounted(() => {
    // 1. 创建节点查询器（实例）
    const selectorQuery = uni.createSelectorQuery();
    // console.log(selectorQuery);

    // 2. 查找节点
    // 2.1 查找单个节点
    // selectorQuery.select('.box').boundingClientRect((data) => {
    //   console.log(data);
    // })

    // 2.2 查找多个节点
    // selectorQuery.selectAll('.box').boundingClientRect((data) => {
    //   console.log(data);
    // })

    // 2.3 查找视口信息
    selectorQuery.selectViewport().boundingClientRect((data) => {
      console.log(data);
    })

    // 3. 执行请求结果
    selectorQuery.exec();
  })
</script>

<style lang="scss">
  page {
    padding: 30rpx;
  }

  .box {
    width: 300rpx;
    height: 300rpx;
    margin-top: 40rpx;
    background-color: pink;
  }
</style>